<!DOCTYPE html>
<html>
   <head>
   	  <meta charset="utf-8"/>
   	  <meta name="renderer" content="webkit" />
	  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>车辆管理系统</title>
      <link href="../../static/pubilc/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link href="../../static/pubilc/bootstrap/css/bootstrap-select.min.css" rel="stylesheet">
  	  <link href="../../static/css/style.css" rel="stylesheet">
 
		<!--[if lt IE 9]>
         <script src="../../static/js/html5shiv.js"></script>
         <script src="../../static/js/respond.min.js"></script>
      <![endif]-->
		
	</head>
	<body>
	<!--头部-->	
	<!--头部-->	
	<div class="header">
		<div class="container">
			<a href="index.html"><h3 class="fl">IC卡信息管理</h3></a>
			<p class="fr">欢迎你，<span>My-Left</span>&ensp;&ensp;&ensp;<a href="#">退出</a></p>
		</div>
	</div>		
	<div class="head"></div>
	<!--内容-->
	
	
	<div class="IC-card">
		<div class="container">
			<div class="IC-content" >
				<!--内容-->
				<div  class="" >
					<table class="table table-striped">
						<caption>
							厂牌型号信息
							<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">新增</button>
						</caption>
						<thead>
							<tr>
								<th>编号</th>
								<th>生产厂家</th>
								<th>厂牌型号</th>
								<th>车长</th>
								<th>车宽</th>
								<th>车高</th>
								<th>燃料</th>
								<th>吨位</th>
								<th>座位</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="brand_table_data">
							<tr>
								<th>1</th>
								<th>四川</th>
								<th>解放123</th>
								<th>3000</th>
								<th>2000</th>
								<th>1000</th>
								<th>汽油</th>
								<th class="hidden"></th>
								<th>20</th>
								<th>7</th>
								<td>
									<a href="#" class="text-primary" data-toggle="modal" data-target="#myModal">修改</a>&ensp;|
									<a href="#" class="text-danger">删除</a>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="page text-center">
						<ul class="pagination ">
							<li><a href="#">&laquo;</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">&raquo;</a></li>
						</ul>
					</div>
				</div>		

				<!--提交-->
			<div class="modal fade container" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="modal-dialog ">
			        <div class="modal-content ">
			        	<form  class="bs-example bs-example-form">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">厂牌型号修改</h4>
			            </div>
			            <div class="modal-body clearfix">
		            		<div class=" col-xs-6 mt">
		            			<div class="input-group ">
									<span class="input-group-addon">生产厂家:</span>
									<input type="text" class="form-control" placeholder="6620">
								</div>
							</div>
							<div class=" col-xs-6 mt">
								<div class="input-group ">
									<span class="input-group-addon">厂牌型号:</span>
									<input type="text" class="form-control valid" placeholder="2400">
								</div>
							</div>
							
							<div class=" col-xs-6 mt">
								<div class="input-group ">
									<span class="input-group-addon">长（毫米）:</span>
									<input type="text" class="form-control valid" placeholder="2400">
								</div>
							</div>
							<div class=" col-xs-6 mt">
		            			<div class="input-group ">
									<span class="input-group-addon">宽（毫米）:</span>
									<input type="text" class="form-control" placeholder="6620">
								</div>
							</div>
							<div class=" col-xs-6 mt">
								<div class="input-group ">
									<span class="input-group-addon">高（毫米）:</span>
									<input type="text" class="form-control valid" placeholder="2400">
								</div>
							</div>
							<div class=" col-xs-6 mt">
		            			<div class="input-group ">
									<span class="input-group-addon">燃料:</span>
									<select class="selectpicker  form-control" >
									  <option value="茶油">茶油</option>
									  <option value="某有">某有</option>
									  <option value="汽油">汽油</option>
									</select>
								</div>
							</div>
							<div class="col-xs-6 mt">
								<div class="input-group ">
									<span class="input-group-addon">吨位:</span>
									<input type="text" class="form-control valid" placeholder="2400">
								</div>
							</div>
							<div class=" col-xs-6 mt">
		            			<div class="input-group ">
									<span class="input-group-addon">座位:</span>
									<input type="text" class="form-control" placeholder="6620">
								</div>
							</div>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <input class="btn btn-success" type="submit" value="提交"/>
			            </div>
			            </form>
			        </div><!-- /.modal-content -->
			    </div><!-- /.modal -->
			    
			</div>
				
			</div>
			
			<script src="../../static/pubilc/bootstrap/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../static/pubilc/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../static/pubilc/bootstrap/js/bootstrap-select.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				$(function(){
					$('.table-striped button.btn-primary').click(function(){
				    	for (var i=0;i<9;i++) {
				    		$('.clearfix .form-control').eq(i).val( '' )
				    	}
					})
					
					$('.table-striped ').delegate('a.text-primary',{
						click:function(){
					    	var th = $(this).parents('tr').find('th');
					    	for (var i=1;i<th.length;i++) {
					    		$('.clearfix .form-control').eq(i-1).val( th.eq(i).text() )
					    	}
					    	
					    	$('.selectpicker').selectpicker('val',  th.eq(6).text() )
					    	
						}
					})
				})
			</script>
		</div>	
	</div>
	<!--尾部-->
	<div class="footer">
		<p>加油卡管理，替换车辆，高峰期车辆管理，办理车辆税</p>
		<p>分析，开票控制，加油卡管理，替换车辆，高峰期车辆管理，办理车辆税</p>
	</div>	
	</body>
</html>